<template>
  <div class="resource-reserve-edit-box">
    <el-table class="table" :data="data" border>
      <el-table-column label="序号" type="index" width="70" align="center" />
      <el-table-column label="矿产代码" prop="date" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.kcdm" placeholder="请选择">
            <el-option label="暂无" value="暂无"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="矿产组合" prop="date" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.kcdm" placeholder="请选择">
            <el-option label="暂无" value="暂无"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="统计对象及单位" prop="date" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.kcdm" placeholder="请选择">
            <el-option label="暂无" value="暂无"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="矿石类型" prop="date" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.kcdm" placeholder="请选择">
            <el-option label="暂无" value="暂无"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="矿石品级" prop="date" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.kcdm" placeholder="请选择">
            <el-option label="暂无" value="暂无"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="矿石质量" prop="date" align="center">
        <template #default="scope">
          <div class="flex-end">
            <div>平均含量</div>
            <div class="icon-my-more icon-image" @click="openQualityDialog(scope)"></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="矿石储量" prop="date" align="center">
        <template #default="scope">
          <div class="flex-end">
            <div>有</div>
            <div class="icon-my-more icon-image" @click="openReservesDialog(scope)"></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="90">
        <template #default="scope">
          <el-button type="danger" plain @click="delData(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 矿产质量 -->
    <t-dialog v-model:visible="qualityVisible" title="矿石质量输入" top="22vh" width="40%">
      <quality-model :qualityData="qualityData"></quality-model>
      <template #footer="{ close }">
        <div class="dialog-footer">
          <el-button type="primary" plain @click="saveQualityData">保存</el-button>
          <el-button type="primary" plain @click="addQualityData">插入</el-button>
          <el-button type="danger" plain @click="delQualityData">删除</el-button>
          <el-button type="success" plain @click="close">退出</el-button>
        </div>
      </template>
    </t-dialog>
    <!-- 矿产储量 -->
    <t-dialog v-model:visible="reservesVisible" title="资源储量输入" top="22vh" width="70%">
      <reserves-model :reservesData="reservesData"></reserves-model>
    </t-dialog>
  </div>
</template>

<script setup>
import qualityModel from './quality-model.vue';
import reservesModel from './reserves-model.vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

const delData = index => {
  console.log();
  props.data.splice(index, 1);
};

//矿石质量
const qualityVisible = ref(false);

const openQualityDialog = ({ row, index }) => {
  qualityData.value.row = row;
  qualityData.value.index = index;
  qualityVisible.value = true;
};

const initQualityData = {
  qualityData: [{}],
  qualityUnit: ''
};

const qualityData = ref(initQualityData);

const addQualityData = () => {
  qualityData.value.qualityData.push({});
};

const saveQualityData = () => {
  props.data.value[qualityData.value.index] = qualityData.value;
  qualityVisible.value = false;
};
const delQualityData = () => {
  const arr = qualityData.value.qualityData;
  arr.splice(arr.length - 1, 1);
};

// 资源储量
const reservesVisible = ref(false);

const initReservesData = {
  reservesData: [
    {
      code: '证实储量'
    },
    {
      code: '证实储量'
    },
    {
      code: '可信储量'
    },
    {
      code: '可信储量'
    },
    {
      code: '探明资源量'
    },
    {
      code: '探明资源量'
    },
    {
      code: '控制资源量'
    },
    {
      code: '控制资源量'
    },
    {
      code: '推断资源量'
    },
    {
      code: '推断资源量'
    },
    {
      code: '潜在矿产资源'
    },
    {
      code: '潜在矿产资源'
    }
  ],
  reservesUnit: ''
};

const reservesData = ref(initReservesData);

const openReservesDialog = ({ row, index }) => {
  reservesData.value.row = row;
  reservesData.value.index = index;
  reservesVisible.value = true;
};
</script>
